<template>
  <div class="antd-table">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px"
      v-if="queryParams">
      <el-form-item v-for="(item, index) in formOption" :key="'formOption'+index" :prop="item.prop" :label="item.label"
        :label-width="item.width>0 ? item.width+'px' :'80px'">
        <!-- // 输入框 -->
        <el-input v-if="item.type === 'input'" v-model.trim="queryParams[item.key]" :placeholder="'请输入'+item.label"
          clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
        <!-- 时间选择器 -->
        <el-date-picker v-if="item.type === 'date'" v-model="time" type="datetimerange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <!-- 下拉 -->
        <el-select v-if="item.type === 'select'" v-model="queryParams[item.key]" :placeholder="'请选择'+item.label"
          clearable>
          <el-option v-for="item in item.selectOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-if="searchBtn.indexOf('search')>-1" icon="el-icon-search" size="mini"
          @click="handleQuery(1)">查询</el-button>
        <el-button type="primary" v-if="searchBtn.indexOf('export')>-1" icon="el-icon-download" size="mini"
          @click="handleExport" :loading="exportLoading" :disabled="exportLoading"
          v-hasPermi="[btnhasPermi[searchBtn.indexOf('export')]]">
          导出
        </el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" v-if="searchBtn.indexOf('add')>-1"
          @click="hander(null, 'addDialog')" v-hasPermi="[btnhasPermi[searchBtn.indexOf('add')]]">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tabloading" :border="border ? true:false" :data.sync="dataSource" size="small"
      ref="multipleTable" style="width: 100%;overflow-y: auto;" @selection-change="handleSelectionChange"
      @sort-change="sortMaskListData" @row-click="handleSelectGoods">
      <el-table-column v-if="allChange === 1" type="selection" width="55">
      </el-table-column>
      <el-table-column v-for="(item, index) in columns" header-align='center' :align="(item.align || 'center')"
        :label="item.title" :prop="item.dataIndex" :key="(item.key || item.dataIndex)"
        @render-header="renderHeader.bind(null, item.title, _this.dataSource[index], index)"
        :min-width="(item.minWidth ||'')" :width="(item.width || '')" :formatter="renderRow.bind(null, item.render)"
        :show-overflow-tooltip="(item.dataIndex === '' || item.isShow === false) ? false:true">
      </el-table-column>
      <!-- :show-overflow-tooltip="(item.dataIndex === '' || !item.isShow) ? false:true" -->
    </el-table>
    <div style="display:flex;padding-top:10px;">
      <div style="flex:1;"></div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="(total || 0)">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
/**封装公共可编辑表格（不含搜索条件）
 * 传过来的参数dataSource 代表表格数据
 * columns 代表表格表头
 * total 代表数据条数（分页时使用）
 * onChange 代表数据回调函数 传给父级所搜条件值在父级请求新数据
 * name 代表表格类名 可以控制不同表格样式
 * pagination 代表是否分页 （传pagination={true}表示分页表格， 不传表示展示表格不做分页处理）
 * sortable 代表是否有排序箭头
 * allChange allChange={1}代表与全选的选择框
 * 要想表格表内可以编辑 表头要render()进行判断 数据要加上edit=false表示可编辑表格。
 */
export default {
  name: "UsualiyTable",
  data() {
    return {
      page: 1,
      pageSize: 10,
      order: "createDate",
      multipleSelection: [],
      showSearch: true,
      exportLoading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tabloading: false,
      time: "",
    };
  },
  props: [
    "loading",
    "btnhasPermi",
    "searchBtn",
    "params",
    "border",
    "formOption",
    "dataSource",
    "columns",
    "total",
    "isShow",
    "onChange",
    "allChange",
    "deleteFunc",
    "pagination",
    "sortable",
    "multipleArr"
  ],
  computed: {},
  beforeUpdate(nextProps) {
    //外面查询数据注入进来
    // if (this.dataSource) {
    // this.searchObject = this.searchList;
    // this.searchObject1 = this.search;
    // }
  },
  watch: {
    multipleArr: {
      handler: function (val, oldVal) {
        let _this = this
        _this.multipleSelection = val
        console.log('valaaaaaaa', val)
        let arr = val ? val : []
        if (arr.length > 0) {
          arr.forEach(row => {
            _this.$refs.multipleTable.toggleRowSelection(row, true);
          });
        } else {
          _this.$refs.multipleTable.clearSelection();
        }
      },
      deep: true,
    },
    params: {
      handler: function (val, oldVal) {
        // // console.log("this.params", val, oldVal);
        this.queryParams = val;
        this.pageSize = val.pageSize ? val.pageSize : 10;
        this.page = val.pageNum ? val.pageNum : 1;
      },
      deep: true,
    },
    loading: {
      handler: function (val, oldVal) {
        // console.log("this.paramsloading", val);
        this.tabloading = val;
        this.$forceUpdate()
      },
      deep: true,
    }
  },
  created() {
    let _this = this;
    this.queryParams = this.params;
    this.pageSize = this.params && this.params.pageSize ? this.params.pageSize : 10;
    this.page = this.params && this.params.pageNum ? this.params.pageNum : 1;
    _this.multipleSelection = this.multipleArr ? this.multipleArr : []
    console.log('multipleArr', this.multipleArr, this.dataSource)
    // if (_this.multipleSelection.length > 0) {
    //   _this.multipleSelection.forEach(row => {
    //     _this.$refs.multipleTable.toggleRowSelection(row, true);
    //   });
    // }
    // console.log('loading', this.loading)
    // _this.formOption.forEach(function (x, i) {
    //   _this.queryParams[x.key] = undefined
    // })
    // // console.log('_this.queryParams', _this.queryParams)
  },
  methods: {
    //表头渲染方法如果不是方法，返回value的值 如果是 请执行方法
    renderHeader: (value, item, index) => {
      if (typeof value === "function") {
        return value(item, index);
      }
      return value;
    },
    //表格每一列渲染方法 如果有返回方法 请执行 否则输出值
    renderRow: (render, row, columns, value, index, render1) => {
      if (typeof render === "function") {
        value = render(value, row, index);
      }
      return value;
    },
    change() {
      let obj = {
        page: this.page,
        pageSize: this.pageSize,
        pageNum: this.page,
        order: this.order,
      };
      this.$emit("change", obj, this.multipleSelection);
    },
    /** 查询按钮操作 */
    handleQuery(index) {
      this.queryParams.pageNum = 1;
      this.$emit("getList", this.queryParams);
    },
    handleExport() {
      this.$emit("handleExport", this.queryParams);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增与编辑修改按钮操作 */
    hander(item, name) {
      this.$emit("hander", item, name);
    },
    handleSizeChange(value) {
      // console.log("value11", value);
      this.pageSize = value;
      this.page = 1;
      this.change();
    },
    handleCurrentChange(value) {
      // console.log("value", value);
      this.page = value;
      this.change();
    },
    submit() {
      this.change();
    },
    //全选时候赋值并且返回选择结果
    handleSelectionChange(val) {
      console.log('选择时间', val)
      this.multipleSelection = val;
      this.$emit("deleteFunc", val);
      // console.log("multipleSelection", val);
    },
    //排序
    sortMaskListData(param) {
      this.sort = param.prop;
      if (param.order === "ascending") {
        this.order = "asc";
      } else {
        this.order = "desc";
      }
      this.change();
    },
    //表格内行选中值
    handleSelectGoods(row) {
      this.$emit("rowClick", row);
    },
  },
};
</script>